<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文明山西新增页面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 40px; /* 增加了外边距 */
            font-size: 18px; /* 增加了字体大小 */
        }

        #add-form {
            width: 600px; /* 增加了表单宽度 */
            height: auto; /* 设置为自动高度以适应内容 */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            padding: 40px; /* 增加了内边距 */
            border-radius: 10px; /* 增加了边框圆角 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 增加了阴影效果 */
        }

        #add-form input[type="text"],
        #add-form input[type="file"] {
            margin-bottom: 30px; /* 增加了外边距 */
            padding: 15px; /* 增加了内边距 */
            border: 1px solid #ddd;
            border-radius: 6px; /* 增加了边框圆角 */
            font-size: 16px; /* 增加了字体大小 */
        }

        #add-form button[type="submit"] {
            padding: 15px 30px; /* 增加了内边距 */
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 6px; /* 增加了边框圆角 */
            cursor: pointer;
            margin-top: 30px; /* 增加了上边距 */
            font-size: 18px; /* 增加了字体大小 */
        }

        #add-form button[type="submit"]:hover {
            background-color: #45a049;
        }

        label {
            margin-bottom: 10px; /* 增加了外边距 */
            display: block;
        }

        .hidden {
            display: none;
        }

        .error {
            color: red;
            text-align: center;
            margin-top: 5px;
            font-size: 25px;
        }
    </style>
    <script>
        function add(){
            let title = document.getElementById("title");
            let link = document.getElementById("link");
            let photoFile = document.getElementById("photoFile");
            let photo = document.getElementById("photo");
            let errorMessage = document.getElementById("errorMessage");

            if(title.value.trim() === ""){
                errorMessage.innerHTML = "标题不能为空！";
                return false;
            }
            if(link.value.trim() === ""){
                errorMessage.innerHTML = "链接不能为空！";
                return false;
            }
            if(photoFile.files.length === 0){
                errorMessage.innerHTML = "图片不能为空！";
                return false;
            }
            photo.value = photoFile.files[0].name;
            return true;
        }
    </script>
</head>
<body>
<form id="add-form" method="post" action="/content/insert_wmsx" enctype="multipart/form-data" onsubmit="return add()">
    <label for="title">标题：</label>
    <input id="title" name="title" type="text"><br>

    <label for="link">链接：</label>
    <input id="link" name="link" type="text"><br>

    <label for="photoFile">图片上传：</label>
    <input id="photoFile" name="photoFile" type="file">
    <input id="photo" name="photo" type="hidden" class="hidden"><br>

    <div id="errorMessage" class="error"></div>

    <button type="submit">提交信息</button>
</form>
</body>
</html>